<template>
    <div>
        <el-form ref="form" :model="form" label-width="130px" size="mini" :inline="true" style="margin-bottom: 10px;">
            <el-row :gutter="24" style="margin-bottom: 10px">
                <el-col :span="12">
                    <el-form-item label="预警范围" style="width: 80%;" prop="ewRange"
                        :rules="[
                          { required: true, message: '请选择预警范围'}
                        ]">
                        <el-select v-model="form.ewRange" placeholder="请选择" :disabled="disableRange" @change="changeRange">
                            <el-option
                                v-for="item in optionRange"
                                :key="item.orgCode"
                                :label="item.orgName"
                                :value="item.orgCode"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :class="disableProvince?'light' : ''">
                    <el-form-item label="所属省分" :required="!disableProvince" style="width: 80%" prop="province"
                        :rules="[
                          { required: !disableProvince, message: '请选择所属省分'}
                        ]">
                        <el-cascader
                            :disabled="disableProvince"
                            v-model="form.province"
                            :options="optionProvince"
                            @change="changeProvince"
                            :show-all-levels="false"
                            :placeholder="placeholderProvince"
                            >
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-bottom: 10px">
                <el-col :span="12">
                    <el-form-item label="所属地市" required style="width: 80%;" prop="city"
                        :rules="[
                          { required: true, message: '请选择所属地市'}
                        ]">
                        <el-select v-model="form.city" placeholder="请选择" :disabled="disableCity">
                            <el-option
                                v-for="item in optionCity"
                                :key="item.AREAID"
                                :label="item.AREANAME"
                                :value="item.AREAID"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户账户" required style="width: 80%;" prop="loginName"
                        :rules="[
                          { required: true, message: '请输入用户账户'}
                        ]">
                        <el-input v-model="form.loginName" class="pms-zr-input" placeholder="请输入" @blur="getUser"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin-bottom: 10px">
                <el-col :span="12">
                    <el-form-item label="用户名称" required style="width: 80%;" prop="name"
                        :rules="[
                          { required: true, message: '请输入用户名称'}
                        ]">
                        <el-input v-model="form.name" class="pms-zr-input" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱地址" required style="width: 80%;" prop="email"
                        :rules="[
                          { required: true, message: '请输入邮箱地址'},
                          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
                        ]">
                        <el-input v-model="form.email" class="pms-zr-input" placeholder="请输入"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="width: 100%;text-align: center;margin: 25px 0 10px">
            <el-button class="pms-zr-button" @click="cancel('form')">取 消</el-button>
            <el-button class="pms-zr-button-primary" style="color: #fff !important;background: #eb4b4b !important;border: none !important; margin-left: 10px !important;" @click="confirm('form')">确 定</el-button>
        </div>
    </div>
</template>
<script>

import {AddEditInfo, queryCity, queryEarly, queryProvince, queryUserInfo} from "@/api/redYellowLightWarn";

export default {
    name: 'addAndEdit',
    components: {
    },
    props:{
        dialogForm:{
            type:Object,
        },
        type:{
            type:String
        }
    },
    data(){
        return {
            form:{},
            optionRange:[],
            optionProvince:[],
            optionCity:[],
            disableRange:false,
            disableProvince:false,
            disableCity:false,
            placeholderProvince:'请选择'
        }
    },
    created() {
        console.log(this.dialogForm)
        this.form=JSON.parse(JSON.stringify(this.dialogForm))
        this.initOption()
        if(this.type === 'edit'){
            this.disableRange = true;
            this.disableProvince = true;
            this.disableCity = true;
            this.form.city = this.form.city || '全部'
            console.log(this.form.province)
            if(this.form.province){
                this.getProvince();
            }else{
                this.placeholderProvince='全部'
            }

        }
    },
    methods:{
        initOption(){
            //当用户账号为总部账号时，下拉选择显示：总部、省分、地市，
            //当用户账号为省分账号时，下拉选择显示：省分、地市
            //当用户账号为地市账号时，下拉选择显示：地市
            queryEarly().then((res)=>{
                this.optionRange=res.data
            })
            //获取初始状态下对应下拉数据进行回显
        },
        getProvince(){
            const params={
                ewRange:this.form.ewRange,
                isAdd:'1'
            }
            queryProvince(params).then((res)=>{
                if(+res.code === 200){
                    this.optionProvince=res.data
                    if(this.type === 'add'){
                        this.disableProvince = false;
                        this.form.province = ''
                    }
                }
            })
        },
        changeRange(){
            //所属省分：
            //当预警范围选择总部时，默认显示总部且不支持编辑
            //当预警范围选择省分时，下拉选择显示智联公司下所有省分公司名称，根据当前登录用户的服务组织进行过滤显示查询结果数据
            //当预警范围选择地市时，下拉选择显示智联公司下所有省分公司名称，根据当前登录用户的服务组织进行过滤显示查询结果数据
            //所属地市：
            //当预警范围选择总部时，默认显示总部且不支持编辑
            //当预警范围为省分时，默认显示全部且不支持编辑
            //当预警范围为地市时，下拉选择显示所选省分下所有地市名称，根据当前登录用户的服务组织进行过滤显示查询结果数据
            if(this.form.ewRange === '1' || this.form.ewRange === '2'){
                this.form.city = '全部'
                this.disableCity = true;
            }else{
                this.form.city = ''
                this.disableCity = false;
            }
            if(this.form.ewRange === '1'){
                this.disableProvince = true;
                this.form.province = ''
                this.placeholderProvince='全部'
            }else{
                this.placeholderProvince='请选择'
                this.getProvince()
            }
        },
        getOptionCity(code){
            // //当预警范围为省分时，默认显示全部且不支持编辑
            this.optionCity=[];
            this.form.city='';
            const params={
                province:code.length > 0 ? code[code.length-1]:'',
                isAdd:'1'
            }
            queryCity(params).then((res)=>{
                if(+res.code === 200){
                    this.optionCity=res.data
                }
            })
        },
        changeProvince(code){
            if(this.form.ewRange === '3'){
                this.getOptionCity(code)
            }
        },
        getUser(){
            //若识别不到该账号则弹出提示“该用户账号不存在，请检查！”
            //根据输入的用户账号，获取用户名称和邮箱
            const params={
                loginName:this.form.loginName
            }
            queryUserInfo(params).then((res)=>{
                if(+res.code === 200){
                    this.form.name=res.data[0].name
                    this.form.email=res.data[0].email
                    this.form.staffId=res.data[0].staffId
                }else{
                    this.form.name=''
                    this.form.email=''
                    this.form.staffId=''
                }
            })
        },
        cancel(formName){
            this.$refs[formName].resetFields();
            this.$emit('close')
        },
        confirm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form.province)
                    let province = this.form.province ? this.form.province[this.form.province.length-1] : ''
                    const params={
                        id: this.form.id,
                        ewRange: this.form.ewRange,
                        province: this.type === 'add' ? province : '',
                        city: this.form.city === '全部' ? '' : this.form.city,
                        loginName: this.form.loginName,
                        name: this.form.name,
                        email: this.form.email,
                        staffId: this.form.staffId
                    }
                    AddEditInfo(params).then((res)=>{
                        if(+res.code === 200){
                            this.$message.success('保存成功')
                            this.$emit('close')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
    }
}
</script>
<style scoped lang="scss">
.el-select-dropdown__item {
    width: 100%;
}
.light ::v-deep .el-cascader .el-input .el-input__inner::placeholder {
    color: #606266;
}
</style>